import { useRef, useEffect, useState, CSSProperties } from 'react';
import { Tag, Input, Tooltip } from 'antd';
import type { InputRef } from 'antd';
// import { ProFormItem, ProFormItemProps } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import {useUpdateEffect} from "ahooks";

// const ProFormTag: React.FC<ProFormItemProps> = (props) => {
//     return (
//         <ProFormItem {...props}>
//             <EditableTag value={props.value}></EditableTag>
//         </ProFormItem>
//     );
// };

const EditableTag = ({
    value,
    onChange,
}: {
    value?: string[];
    onChange?: (val: string[]) => void;
}) => {
    const [tags, setTags] = useState<string[]>(value ?? []);
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const [editInputIndex, setEditInputIndex] = useState(-1);
    const [editInputValue, setEditInputValue] = useState('');
    const inputRef = useRef<InputRef>(null);
    const editInputRef = useRef<InputRef>(null);

    useUpdateEffect(()=>{
        setTags?.(value??[]);
    },[value])

    useEffect(() => {
        if (inputVisible) {
            inputRef.current?.focus();
        }
    }, [inputVisible]);

    useEffect(() => {
        editInputRef.current?.focus();
    }, [inputValue]);

    useEffect(() => {
        onChange?.(tags);
    }, [tags]);

    const styleInput: CSSProperties = { width: 78, marginRight: 8, verticalAlign: 'top' };

    const handleClose = (removedTag: string) => {
        const newTags = tags.filter((tag) => tag !== removedTag);
        setTags(newTags);
    };

    const showInput = () => {
        setInputVisible(true);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
    };

    const handleInputConfirm = () => {
        if (inputValue && tags.indexOf(inputValue) === -1) {
            setTags([...tags, inputValue]);
        }
        setInputVisible(false);
        setInputValue('');
    };

    const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setEditInputValue(e.target.value);
    };

    const handleEditInputConfirm = () => {
        const newTags = [...tags];
        newTags[editInputIndex] = editInputValue;
        setTags(newTags);
        setEditInputIndex(-1);
        setInputValue('');
    };

    return (
        <>
            {tags.map((tag, index) => {
                if (editInputIndex === index) {
                    return (
                        <Input
                            ref={editInputRef}
                            key={tag}
                            size="small"
                            value={editInputValue}
                            onChange={handleEditInputChange}
                            onBlur={handleEditInputConfirm}
                            onPressEnter={handleEditInputConfirm}
                            placeholder="回车创建"
                            style={{
                                ...styleInput,
                            }}
                        />
                    );
                }
                const isLongTag = tag.length > 20;
                const tagElem = (
                    <Tag
                        key={tag}
                        closable={true}
                        onClose={() => handleClose(tag)}
                        style={{
                            userSelect: 'none',
                        }}
                        color="processing"
                    >
                        <span
                            onDoubleClick={(e) => {
                                setEditInputIndex(index);
                                setEditInputValue(tag);
                                e.preventDefault();
                            }}
                        >
                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                        </span>
                    </Tag>
                );
                return isLongTag ? (
                    <Tooltip title={tag} key={tag}>
                        {tagElem}
                    </Tooltip>
                ) : (
                    tagElem
                );
            })}
            {inputVisible && (
                <Input
                    ref={inputRef}
                    type="text"
                    size="small"
                    value={inputValue}
                    onChange={handleInputChange}
                    onBlur={handleInputConfirm}
                    onPressEnter={handleInputConfirm}
                    placeholder="回车创建"
                    style={{
                        ...styleInput,
                    }}
                />
            )}
            {!inputVisible && (
                <Tag className="site-tag-plus" onClick={showInput}>
                    <PlusOutlined />
                    新建
                </Tag>
            )}
        </>
    );
};
export default EditableTag;
